import {
  ModalForm,
  ProFormDigit,
  ProFormGroup,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { useEffect, useRef } from 'react';
import { defaultValue, rules } from './FormPage';
import type { FormInstance } from 'antd';
import { message } from 'antd';
import { saveHostInfo } from '@/pages/HostInfo/service';

export default (props: Record<any, any>) => {
  const formRef = useRef<FormInstance>();
  // const [visible, setVisible] = useState(true)
  useEffect(() => {
    formRef.current?.setFieldsValue({ ...defaultValue, ...props.values });
  }, [props]);

  return (
    <ModalForm
      title="新的主机信息"
      formRef={formRef}
      visible={props.visible}
      onVisibleChange={props.setVisible}
      onFinish={async (values) => {
        const hide = message.loading('正在提交');
        return saveHostInfo({ ...props.values, ...values })
          .then(() => {
            props.setVisible(false);
          })
          .finally(() => {
            hide();
          });
      }}
    >
      <ProFormText name="name" label="主机名称" placeholder="请输入 主机名称" rules={rules.name} />
      <ProFormGroup>
        <ProFormText name="mac" label="MAC 地址" placeholder="请输入 MAC 地址" rules={rules.mac} />
        <ProFormText
          name="gateway"
          label="网关地址"
          placeholder="请输入 网关地址"
          help="网关地址（默认：255.255.255.255）"
          rules={rules.gateway}
        />
        <ProFormDigit
          name="port"
          label="端口"
          placeholder="请输入 端口"
          help="端口（默认：9）"
          rules={rules.port}
          min={0}
          fieldProps={{ precision: 0 }}
        />
      </ProFormGroup>
      <ProFormTextArea name="remark" label="备注" placeholder="请输入 备注" rules={rules.remark} />
    </ModalForm>
  );
};
